<div class="neo-header-text-container">
    <span class="neo-header-text">Guide: the create-app script in detail</span>
</div>
<article>
    <p>Inside the package.json you will find the script "create-app", which is a very good starting point for creating
    your first neo.mjs app. You can run it inside the root folder of the neo.mjs repository like this:</p>
    <pre><code>npm run create-app</code></pre>
    <p>We would like to shed some light on the internals of this process to show you how to:</p>
    <ol>
        <li>Create an app using the script</li>
        <li>Change the name of your app</li>
        <li>Change the theme(s) of your app</li>
        <li>Create an app manually</li>
        <li>Remove an app you no longer need</li>
        <li>Enhancing the script (feature request)</li>
    </ol>
    <h3><b style="color:red;">1)</b> After running the script, you will get asked to enter the name of your app (defaults to MyApp)</h3>
    <img src="./resources/images/tutorials/create-app-choose-name.png">
    <p>Afterwards you will get asked if you want to use the neo-theme-dark, neo-theme-light or both:</p>
    <img src="./resources/images/tutorials/create-app-choose-theme.png">
    <p>This is pretty much it. You will see a new folder under neo/apps with the lowercase version of your app name.<br/>
    Hint: We recommend to stick to alphabetic characters for your app name.</p>
    <img src="./resources/images/tutorials/create-app-files.png">
    <p>You can see the code of the script in <a href="https://github.com/neomjs/neo/blob/dev/buildScripts/createApp.js">neo/buildScripts/createApp.js</a></p>
    <p>The script will check, if neo/buildScripts/webpack/development/json/myApps.json exists.<br/>
    The same will happen for neo/buildScripts/webpack/production/ (sticking to dev from here on, it is 1:1 for prod)</p>
    <p>In case the file does not exist, neo/buildScripts/webpack/development/json/myApps.template.json will get consumed to generate it.</p>
    <pre><code>{
    "bodyTag": "<body>",
    "buildFolder": "../../../dist/development",
    "environment": "development",
    "mainInput": "./src/Main.mjs",
    "mainOutput": "main.js",

    "workers": {
        "data": {
            "input": "./src/worker/Data.mjs",
            "output": "dataworker.js"
        },
        "vdom": {
            "input": "./src/worker/VDom.mjs",
            "output": "vdomworker.js"
        }
    },

    "apps": {
        "RealWorld": {
            "input": "myApps/RealWorld.mjs",
            "output": "/apps/realworld/",
            "title": "RealWorld"
        }
    }
}</code></pre>
    <p>At this point, the RealWorld demo app is already included here to give you an example of how to create an neo.mjs app.
    The docs app is a neo.mjs app as well (and probably the better starting point.</p>
    <p>The .../json/myApps.json files as well as the content inside the neo/apps folder is added to the .gitignore.</p>
    <p>To generate the index.html file for your app, neo/buildScripts/webpack/index.ejs will get consumed.<br/>
    We have an open ticket to enhance this file: <a href="https://github.com/neomjs/neo/issues/134">#134</a>,
    please let us know in case this is important for you!</p>
    <h3><b style="color:red;">2)</b> Change the name of your app</h3>
    <ol>
        <li>Change the keys inside the .../json/myApps.json files (inside the apps object)</li>
        <li>Rename the app folder to the lowercase version of your new app name</li>
        <li>Open the app.mjs file inside your app folder and adjust the appPath & name</li>
        <li>Open the index.html file inside your app folder and adjust the appPath</li>
        <li>Open the MainContainer.mjs file inside your app folder and adjust the className</li>
        <li>Although this process feels like an edge-case, it could get automated with a new script.<br/>
        Feel free to open a feature request ticket in case this feels important for you!</li>
    </ol>
    <h3><b style="color:red;">3)</b> Change the theme(s) of your app</h3>
    <p>Open the index.html file inside your app folder and adjust the Neo.config => themes</p>
    <ol>
        <li>The default value is themes: ['neo-theme-light', 'neo-theme-dark'], so not using the config includes both themes</li>
        <li>themes: ['neo-theme-dark'] => include only the dark theme</li>
        <li>themes: ['neo-theme-light'] => include only the light theme</li>
        <li>themes: ['neo-theme-dark', 'neo-theme-light'] => include both themes and use the dark theme as the default one.</li>
    </ol>
    <h3><b style="color:red;">4)</b> Create an app manually</h3>
    <p>This process is similar to changing the app name.</p>
    <ol>
        <li>Copy an existing app folder into neo/apps and use the new lowercase app name as the folder name</li>
        <li>Follow the steps in <span style="color:red;">3)</span></li>
        <li>Add your new app into the .../json/myApps.json files</li>
    </ol>
    <h3><b style="color:red;">5)</b> Remove an app you no longer need</h3>
    <ol>
        <li>Delete your app folder inside neo/apps</li>
        <li>Remove the entries inside the .../json/myApps.json files.<br/>
        In case this was your only app, you can delete the the .../json/myApps.json files instead.</li>
    </ol>
    <h3><b style="color:red;">6)</b> Enhancing the script (feature request)</h3>
    <p>We do have an open feature request ticket for creating an npx script, which would allow to create neo apps
    outside the neo repository root folder. Please take a look at: <a href="https://github.com/neomjs/neo/issues/90">#90</a></p>
</article>